<template>
	<div>
		<el-container>
			<!--头部-->
			<el-header class="header">
				<el-radio-group v-model="isCollapse">
					<el-radio-button :value="false">展开</el-radio-button>
					<el-radio-button :value="true">关闭</el-radio-button>
				</el-radio-group>
			</el-header>
			<el-container>
				<!--侧边栏-->
				<el-menu
					:default-active="store.menuId"
					:collapse="isCollapse"
					@open="handleOpen"
					@close="handleClose"
					router
				>
					<el-menu-item v-for="route in state.routeList" :key="route.path" :index="route.path">
						<el-icon>
							<component :is="route.icon"></component>
						</el-icon>
						<template #title>
							{{ route.name }}
						</template>
					</el-menu-item>
					<el-sub-menu index="wchat">
						<template #title>
							<el-icon><Postcard
							/></el-icon>
							<span>分类管理</span>
						</template>
						<el-menu-item index="/cate/project">项目分类</el-menu-item>
						<el-menu-item index="/cate/resources">资源分类</el-menu-item>
					</el-sub-menu>
					<el-sub-menu index="project">
						<template #title>
							<el-icon><FullScreen /></el-icon>
							<span>项目管理</span>
						</template>
						<el-menu-item index="/project/list">项目列表</el-menu-item>
						<el-menu-item index="/project/enter">录入列表</el-menu-item>
						<el-menu-item index="/project/create">创建项目</el-menu-item>
					</el-sub-menu>
					<el-sub-menu index="wchat">
						<template #title>
							<el-icon><Notification
							/></el-icon>
							<span>公众号</span>
						</template>
						<el-menu-item index="/wechat/menu">公众号菜单</el-menu-item>
						<el-menu-item index="/wechat/message">消息回复</el-menu-item>
					</el-sub-menu>
					<el-sub-menu index="finance">
						<template #title>
							<el-icon><MessageBox /></el-icon>
							<span>财务</span>
						</template>
						<el-menu-item index="/finance/withdrawal">用户提现</el-menu-item>

					</el-sub-menu>
				</el-menu>
				<!--身体-->
				<el-main >
					<router-view/>
				</el-main>
			</el-container>
		</el-container>
		<upload />
	</div>
</template>

<script lang="ts" setup>
import { userConfigStore } from '~/stores/userConfigStore'
import router from '~/plugins/router'

const isCollapse = ref(true)
// 获取 Pinia Store
const store = userConfigStore();
const isMobile = () => {
	let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
	return flag;
}

onMounted(() => {
	// router.push(store.menuId)
	if (isMobile()) {
		isCollapse.value = true
	} else {
		isCollapse.value = false
	}
})

const  state = reactive({
	routeList:[
		{path:"/resources",name:"项目管理", icon: 'ShoppingBag'},
		{path:"/product",name:"商品管理", icon: 'Discount'},
		{path:"/audit",name:"审核管理",icon: 'Sell'},
		{path:"/user",name:"用户管理",icon: 'User'},
		{path:"/config",name:"配置管理",icon: 'Setting'},
	]
})



// const routes = getRoutes()
// 	.filter((r) => !r.path.includes('notFound'))
// 	.filter((r) => !r.path.includes('login'))
// 	.filter((r) => !r.path.includes('product/:id'))
// 	.filter((r) => !r.path.includes('audit/:id'))
// 	.map((r) => {
// 		let {path, name} = r
// 		if (path === safeResolve('/')) {
// 			return {path, name: 'home'}
// 		}
// 		if (!name) {
// 			name = path
// 		}
// 		return {path, name: name.toString().slice(1).replaceAll('/', ' · ')}
// 	})

const handleOpen = (key: string, keyPath: string[]) => {
	store.menuId = key
}
const handleClose = (key: string, keyPath: string[]) => {
	console.log(key, keyPath)
}
</script>

<style scoped>



</style>


